<template>
  <div class="dropdown-menu" @click.stop>
    <div v-if="user.isLoggedIn" class="dropdown-item user-info" @click="$emit('view-profile')">
      <i class="fas fa-user"></i>
      <span>{{ user.name }}</span>
    </div>
    <div v-if="!user.isLoggedIn" class="dropdown-item" @click="$emit('login')">
      <i class="fas fa-sign-in-alt"></i>
      <span>登录</span>
    </div>
    <div v-if="user.isLoggedIn" class="dropdown-item" @click="$emit('logout')">
      <i class="fas fa-sign-out-alt"></i>
      <span>登出</span>
    </div>
    <div v-if="user.isLoggedIn" class="dropdown-item" @click="$emit('view-orders')">
      <i class="fas fa-clipboard-list"></i>
      <span>我的订单</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DropdownMenu',
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  emits: ['login', 'logout', 'view-orders', 'view-profile']
  //使用的是 Options API,要用emits:[]声明事件
  // App.vue —— Header.vue ——UserProfile.vue ——DropdownMenu.vue,这四个一直传递下来事件
}
</script>

<style scoped>
.dropdown-menu {
  position: absolute;
  top: 50px;
  right: 0;
  background: white;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  width: 180px;
  z-index: 1000;
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  color: var(--dark-color);
  transition: background 0.3s;
  cursor: pointer;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

.dropdown-item.user-info {
  background: var(--light-color);
  /* cursor: default; */
}

.dropdown-item i {
  margin-right: 10px;
  color: var(--primary-color);
  width: 16px;
  text-align: center;
}
</style>